<template>
	<view>
		<view class="TopBox">
			<view class="example-body">
				<view class="tips">
					<text>上传您添加的商品图片</text>
				</view>
				<view class="image">
					<uni-file-picker limit="1" :del-icon="true" disable-preview :imageStyles="imageStyles"
						file-mediatype="image" @success="success" @fail="fail" @select="select">点击选择图片</uni-file-picker>
				</view>
			</view>
			<view class="list">
				<view class="left">
					<text>商品名称</text>
				</view>
				<view class="right">
					<input type="text" :placeholder='dataList.name' v-model="name">
				</view>
			</view>
			<view class="list">
				<view class="left">
					<text>零售价</text>
				</view>
				<view class="right">
					<input type="text" :placeholder="dataList.salePrice" v-model="price">
				</view>
			</view>
			<!-- <view class="list">
				<view class="left">
					<text>成本价</text>
				</view>
				<view class="right">
					<text>￥3</text>
					<text>></text>
				</view>
			</view>
			<view class="list">
				<view class="left">
					<text>库存</text>
				</view>
				<view class="right">
					<text>10个</text>
					<text>></text>
				</view>
			</view> -->
			<!-- <view class="textlist">
				<input type="text" placeholder="商品描述">
			</view> -->
			<view class="addbox">
				<view class="btn" @click="updateGood">
					<text>确认修改</text>
				</view>
			</view>
			<view class="deletebox">
				<view class="btn" @click="deleteGood">
					<text>删除</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageStyles: {
					width: 164,
					height: 164,
					border: { // 如果为 Boolean 值，可以控制边框显示与否
						color: "#fff", // 边框颜色
						width: "1px", // 边框宽度
						style: "dashed", // 边框样式						
					}
				},
				id: "",
				dataList: [],
				url: '',
				name:"",
				price:'',
			};
		},
		onLoad(e) {
			this.id = e.id;
			this.getGoodDetail()
		},
		methods: {
			async deleteGood(){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '请确认是否删除',
				    success: async function(res) {
						if (res.confirm) {							
							const data = {
								platformGoodsId: that.id,
								storeId: uni.getStorageSync('storeId'),					
							};
							const {
								data: res
							} = await uni.$http.post(
								`/store/deleteStoreGoods`, data
							);
							if (res.code !== 0) return uni.$showMsg(res.message);
							console.log(res.data);
							setTimeout(() => {
								uni.navigateBack()
							}, 2000)
							console.log(res, '删除商品成功!');
							uni.$showMsg('删除成功!')
						} else if (res.cancel) {
							console.log('取消删除');
						}
					}
				})
			},
			success(e) {

			},
			fail(e) {

			},
			select(e) {
				console.log(e);
				uni.uploadFile({
					url: 'https://jkht.wteam.club/common/uploadFile',
					filePath: e.tempFilePaths[0],
					name: 'file',
					header: {
						"Content-Type": "multipart/form-data",
						"Authorization": uni.getStorageSync('token'),
					},
					success: (res) => {
						if (JSON.parse(res.data).code == 200) {
							console.log(JSON.parse(res.data).urls);
							this.url = JSON.parse(res.data).urls;
						} else {
							uni.$showMsg(res.msg);
							console.log(res);
						}
					},
					fail: (res) => {
						uni.$showMsg(res.msg);
					}
				})
			},
			async updateGood() {
				const data = {
					id: this.id,
					storeId: uni.getStorageSync('storeId'),
					salePrice: this.price,
					url: this.url,
					name: this.name,
					 goodsType: 0,

				};
				const {
					data: res
				} = await uni.$http.post(
					`/store/addGoodsByBarcode`, data
				);
				if (res.code !== 0) return uni.$showMsg(res.message);
				console.log(res.data);
				setTimeout(() => {
					uni.navigateBack()
				}, 2000)
				console.log(res, '修改商品成功!');
				uni.$showMsg('修改成功!')
			},
			async getGoodDetail() {
				const data = {
					storeGoodsId: this.id,
					storeId: uni.getStorageSync('storeId'),
				};
				const {
					data: res
				} = await uni.$http.post(
					`/store/queryStoreGoodsDetail`, data
				);
				if (res.code !== 0) return uni.$showMsg(res.message);
				this.name=res.data.name;
				this.price=res.data.salePrice;
				console.log(res.data);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f8fc;
	}

	.deletebox {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 2vh;

		.btn:active {
			background-color: rgba(225, 0, 0, 0.1);
		}

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 6vh;
			width: 80%;
			color: #fff;
			background-color: #d43030;
			font-size: 4vw;
		}
	}

	.addbox {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 7vh;

		.btn:active {
			background-color: rgba(255, 147, 111, 0.1);
		}

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 6vh;
			width: 80%;
			color: #fff;
			background-color: #ff8d1a;
			font-size: 4vw;
		}
	}

	.textlist {
		width: 100%;
		height: 7vh;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 2vw;
		padding-left: 3vw;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;

		input {
			width: 100%;
		}
	}

	.list {
		width: 100%;
		height: 7vh;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1vw;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;

		.left {
			margin-left: 2vw;
		}

		.right {
			font-size: 35rpx;
			width: 35vw;
		}
	}

	.example-body {
		padding: 3vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		// background-color: #fff;
		.image {
			margin-top: 3vh;
			background-color: #fff;
			box-shadow: 2rpx 4rpx 16rpx rgba(0, 0, 0, 0.1);
			color: #1a91ff;
		}

	}
</style>